<template>
	<view class="warp">
		<!-- #ifdef APP-PLUS -->
		<status-bar />
		<!-- #endif -->

<view class="head">
			<view>yangshop</view>
		</view>

<view class="uni-search-box"  @click="searchClick">
			<uni-search-bar v-model="keyword" ref="searchBar" radius="100" cancelButton="none" disabled
				:placeholder="inputPlaceholder" />
			<view class="cover-search-bar" ></view>
		</view>


		


		<!-- banner -->
		<unicloud-db ref="bannerdb" v-slot:default="{data, loading, error, options}" collection="opendb-banner"
			field="_id,bannerfile,open_url,title" @load="onqueryload">
			<!-- 当无banner数据时显示占位图 -->
			<image v-if="!(loading||data.length)" class="banner-image" src="/static/grid/empty.png" mode="aspectFill"
				:draggable="false" />
			<uni-swiper-dot v-else class="uni-swiper-dot-box" @clickItem="clickItem" :info="data" :current="current"
				field="content">
				<swiper class="swiper-box" @change="changeSwiper" :current="swiperDotIndex" :autoplay="true"
					:interval="4000" :duration="500">
					<swiper-item v-for="(item, index) in data" :key="item._id">
						<view class="swiper-item" @click="clickBannerItem(item)">
							<image class="banner-image" :src="item.bannerfile.url" mode="aspectFill"
								:draggable="false" />
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</unicloud-db>


		<!-- 宫格 -->
		<!-- 	<uni-section :title="$t('grid.grid')" style="margin: 0;" type="line"></uni-section>
		<view class="example-body">
			<uni-grid :column="2" :highlight="true" @change="change">
				<template v-for="(item,i) in gridList">
					<uni-grid-item :index="i" :key="i"
						v-if="i<3 || i>2&&i<6&&hasLogin || i>5&&uniIDHasRole('admin')"
					>
						<view class="grid-item-box" style="background-color: #fff;">
							<image :src="'/static/grid/c'+(i+1)+'.png'" class="image" mode="aspectFill" />
							<text class="text">{{item}}</text>
						</view>
					</uni-grid-item>
				</template>
			</uni-grid>
		</view> -->
		<view class="headtoo">
			<view>yangshop</view>
			<view>
			</view>
			<view @click="ccc"> 转换显示格式</view>
		</view>
		
		<view class="head-one">
			
			<view class="head-too" >
				<image src="../../static/app-plus/sharemenu/miaosha.png" mode=""></image>
				<view>限时秒杀</view>
			</view>
			<view class="head-too">
				<image src="../../static/app-plus/sharemenu/ppgy.png" mode=""></image>
				<view>杨浦果园</view>
			</view>
			<view class="head-too" @click="fenl">
				<image src="../../static/app-plus/sharemenu/jingp.png" mode=""></image>
				<view>分类选择</view>
			</view>
			<view class="head-too">
				<image src="../../static/app-plus/sharemenu/cz.png" mode=""></image>
				<view>手机充值</view>
			</view>
			
			
		</view>
		
		
		<view class="headtoo">
			<view>猜你喜欢</view>
			<view>
			</view>
			<view @click="ccc" v-show="aaa"> 宫格排序</view>
			<view @click="ccc" v-show="bbb"> 列表排序</view>
		</view>

		<unicloud-db ref="udb" v-slot:default="{data, pagination, loading, hasMore, error}"
			collection="opendb-mall-goods":column="2"
			field="category_id,goods_sn,name,goods_desc,goods_banner_imgs,goods_thumb,keywords,add_date,seller_note,remain_count,last_modify_date,comment_count,is_alone_sale,is_best,is_hot,is_new,is_on_sale,is_real,month_sell_count,total_sell_count">
			<view v-if="error">{{error.message}}</view>
			
				
				

						
							

								<view class="nr" v-for="item in data" v-show="aaa" >

									<view class="nrdiv" @click="xiangxi(item._id)" >
										<image :src="item.goods_thumb" mode=""></image>
										<view>{{item.name}}</view>
										<view>{{item.goods_desc}}</view>
										<view>￥:  {{item.month_sell_count}}</view>
									</view>

								</view>
							
					
					
					<view class="nr2" v-for="item in data" v-show="bbb" >
					
						<view class="nrdiv2" @click="xiangxi(item._id)" >
							<image :src="item.goods_thumb" mode=""></image>
							<view>{{item.name}}</view>
							<view>{{item.goods_desc}}</view>
							<view>￥:  {{item.month_sell_count}}</view>
						</view>
					
					</view>
				
			

		</unicloud-db>






	</view>

</template>

<script>
	import {
		mapGetters,
	} from 'vuex';
	import statusBar from "@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-status-bar";
	export default {
		components: {
			statusBar
		},
		data() {
			return {
				gridList: [],
				current: 0,
				swiperDotIndex: 0,
				aaa:true,
				bbb:false,
				inputPlaceholder:"请输入搜索内容",
			keyword: ""
			}
		},
		computed: {
			...mapGetters({
				hasLogin: 'user/hasLogin'
			})
		},
		onLoad() {
			// let gridList = []
			// for (var i = 0; i < 2; i++) {
			// 	gridList.push( this.$t('grid.visibleToAll') )
			// }
			// for (var i = 0; i < 2; i++) {
			// 	gridList.push( this.$t('grid.invisibleToTourists') )
			// }
			// for (var i = 0; i < 2; i++) {
			// 	gridList.push( this.$t('grid.adminVisible') )
			// }
			// this.gridList = gridList
		},
		methods: {
			
			searchClick() { //点击搜索框
				
				uni.navigateTo({
					url: '/pages/list/search/search',
					
				});
				
			},
			
			ccc()
			{
				this.aaa = !this.aaa
				this.bbb = !this.bbb
				console.log("转换成功")
			},
			
			fenl()
			{
				uni.navigateTo({
					url:'/pages/fenlei/fenlei'
				})
			},
			
			change(e) {
				uni.showToast({
					title: this.$t('grid.clickTip') + " " + `${e.detail.index}` + " " + this.$t(
						'grid.clickTipGrid'),
					icon: 'none'
				})
			},
			/**
			 * banner加载后触发的回调
			 */
			onqueryload(data) {},
			changeSwiper(e) {
				this.current = e.detail.current
			},
			clickItem(e) {
				this.swiperDotIndex = e
			},
			
			xiangxi(id)
			{
				
				uni.navigateTo({
					url:'/pages/xiangx/xiangx?id=' + id,
					
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
				console.log(id)
			},
			/**
			 * 点击banner的处理
			 */
			clickBannerItem(item) {
				// 有外部链接-跳转url
				if (item.open_url) {
					uni.navigateTo({
						url: '/pages/common/webview/webview?url=' + item.open_url + '&title=' + item.title,
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
				// 其余业务处理
			}
		}
	}
</script>

<style>
	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 14px;
		line-height: inherit;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		font-size: 14px;
		background-color: #ffffff;
	}

	/* #endif */

	/* #ifdef APP-NVUE */
	.warp {
		background-color: #fff;
	}

	/* #endif */

	.example-body {
		flex-direction: column;
		padding: 15px;
		background-color: #ffffff;
	}

	.image {
		width: 50rpx;
		height: 50rpx;
	}

	.text {
		text-align: center;
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
	}

	.grid-item-box {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

.swiper-item
{
	width: 750rpx;
	height: 400rpx;
}

.swiper-item image
{
	width: 750rpx;
	height: 400rpx;
}
	.banner-image {
		width: 750rpx;
		height: 400rpx;
	}

	.swiper-box {
		height: 400rpx;
		width: 750rpx;
	}

	.search-icons {
		padding: 16rpx;
	}

	.search-container-bar {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		align-items: center;
		position: fixed;
		left: 0;
		right: 0;
		z-index: 10;
		background-color: #fff;
	}

	/* #ifndef APP-NVUE || VUE3*/
	
	/* #endif */
	.uni-searchbar__box {
		border-width: 0;
	}

	/* #ifndef APP-NVUE || VUE3 */
	
	/* #endif */
	.uni-input-placeholder {
		font-size: 28rpx;
	}



	.head {
		height: 80rpx;
		/* background-color: aqua; */
		text-align: center;
		border: #c5c5c5 2px solid;
	}

	.head view:nth-child(1) {
		font-size: 35rpx;
		margin-top: 10rpx;
	}



	.headtoo {

		height: 50rpx;
		
		position: relative;
		border: #c5c5c5 1px solid;
	}

	.headtoo view:nth-child(1) {
		position: absolute;
		left: 20rpx;
	}

	.headtoo view:nth-child(2) {
		position: absolute;
		left: 190rpx;
		color: #007AFF;
	}

	.headtoo view:nth-child(3) {
		position: absolute;
		right: 130rpx;
		color: #a8a8a8;
	}
	.headtoo view:nth-child(4) {
		position: absolute;
		right: 130rpx;
		color: #a8a8a8;
	}
	
	.head-one
	{
	
	height: 210rpx;
	
	}
	.head-too
	{
		width: 140rpx;
		height: 210rpx;
		float: left;
		margin-right: 35rpx;
	}
	.head-too image
	{
		margin-top: 10rpx;
		margin-left: 20rpx;
		width: 160rpx;
		height: 140rpx;
	}
	.head-too view
	{
		width: 200rpx;
		text-align: center;
		margin-left: 5rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	

	.nr {
             
		text-align: center;
	}

	.nrdiv {
		width: 370rpx;
        height: 400rpx;
		border: #c5c5c5 1px solid;
		float: left;
	}

	.nrdiv image {
		width: 300rpx;
		height: 240rpx;
		margin-top: 15rpx;
	}

	.nrdiv view:nth-child(2) {
		font-size: 30rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.nrdiv view:nth-child(3) {
		font-size: 20rpx;
		margin-bottom: 10rpx;
		margin-top: 5rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	}
	
	.nr2 {
	         width: 750rpx;
		text-align: center;
	}
	
	.nrdiv2 {
		width: 750rpx;
	    height: 700rpx;
		border: #c5c5c5 1px solid;
		
	}
	
	.nrdiv2 image {
		width: 750rpx;
		height: 500rpx;
		margin-top: 5rpx;
	}
	
	.nrdiv2 view:nth-child(2) {
		font-size: 30rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.nrdiv2 view:nth-child(3) {
		font-size: 20rpx;
		margin-bottom: 10rpx;
		margin-top: 5rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	}
	
	
	.search {
		height: 110rpx;
		position: relative;
		display: flex;
	}
	
	.newsearch {
		position: absolute;
		left: 5rpx;
		height: 100rpx;
		width: 550rpx;
		border: #a6a6a6 2px solid;
	}
	
	.search button {
		height: 110rpx;
		width: 190rpx;
		position: absolute;
		left: 560rpx;
		
		background-color: #a1f1f1;
	}
	.loading
	{
		font-size: 50rpx;
		text-align: center;
		color: red;
	}
</style>
